<template>
	<div class="production">
		<div class="up">
			<div class="each" style="flex: 1;">
				<dv-border-box-10>
					<ws></ws>
				</dv-border-box-10>
			</div>
			<div class="each" style="flex: 1;">
				<dv-border-box-10>
					<work></work>
				</dv-border-box-10>
			</div>
			<div class="each" style="flex: 2;">
				<dv-border-box-10>
					<pro></pro>
				</dv-border-box-10>
			</div>
		</div>
		<div class="down">
			<dv-border-box-1>
				<!-- 必须将页面注册成独立页面才能消除scale带来的影响 -->
				<iframe :src="mapsrc" class="mapbox"></iframe>
			</dv-border-box-1>
		</div>
	</div>
</template>
<script>
	import ws from './ws.vue'
	import work from './work.vue'
	import pro from './prodata.vue'
	import gdmap from './gdmap.vue'
	export default {
		components: {
			ws,
			work,
			pro,
			gdmap
		},
		name: 'production',
		data() {
			return {
				mapsrc: location.href.split("#")[0] + '#/gdmap'
			}
		},
		mounted() {
			this.$store.commit('setload', false)
		}
	}
</script>
<style lang='scss'>
	.production {
		.up {
			display: flex;

			.each {
				margin: 10rem 5rem;
				height: 220rem;
			}
		}

		.down {
			height: 430rem;

			.mapbox {
				border: 0;
				width: 100%;
				height: 400rem;
				width: 96%;
				margin: 15rem auto;
				border-radius: 20rem;
				overflow: hidden;
			}
		}
	}
</style>
